<template>
  <div class="homeselected">
    <div class="nav">
       <ul>
         <li class="selected one"><a href="">最热</a></li>
         <li class="two" ><a href="">折扣</a></li>
       </ul>
    </div>
    <div class="main">
        <div class="modular" v-for="item in selectedList" :key="item.id">
            <img :src="item.imgUrl" alt="">
            <div class="font">
                <p>{{item.sort}}</p>
                <p>{{item.spell}}</p>
            </div>
        </div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'HomeSelected',
  props:{
    selectedList:Array
  },
  data () {
    return {
      
    }
  },
  methods:{
      
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/css/varibles.styl'
.homeselected
    width 100% 
    height 4rem
    border 1px solid $bgColor
    border-radius .2rem 
    margin-top .2rem 
    background-color #fff
    .nav
        width 100%
        height 1rem
        text-align right
        ul li
            width 48%
            height .6rem
            float left
            font-size .28rem
            position relative
            a 
                color #000
        .selected 
            font-weight bold
            color #000 
            &:after 
              content ''
              position absolute
              bottom .2rem
              top auto
              left 82%
              height 3px
              width .6rem
              background-color #000          
        .one 
            text-align right 
            padding .2rem .1rem  .2rem 0
        .two
            text-align left  
            padding  .2rem 0 .2rem 0
    .main 
        width 100%
        height 1rem
        // border-top 1px solid $bgColor
        // margin-top .2rem
        .modular
            width 33.33%
            float left
            text-align center
            img 
                width 1.4rem
                // border 1px solid $bgColor
                // border-radius 50%
                vertical-align middle
                padding-top .2rem 
            .font
                padding-top .3rem
                p 
                    padding-top .1rem
        .hide
            display none
</style>
